<template>
    <el-container>
        <el-main>
            <el-card v-if="article" class="article-detail">
                <h1>{{ article.title }}</h1>
                <p>{{ article.content }}</p>
            </el-card>
            <div v-else class="no-data">文章不存在</div>
        </el-main>
    </el-container>
    <div>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from '../axios';
import type { Article } from '../types/Article'
import { useRoute } from 'vue-router'

const route = useRoute()
const article = ref<Article | null>(null)
const fetchArticle = async () => {
    try {
        const { id } = route.params
        console.log('id:',`/articles/${id}`)
        const resp = await axios.get<Article>(`/articles/${id}`)
        article.value = resp.data
    } catch (error) {
        console.log('fetchArticle err:', error)
    }
}

onMounted(fetchArticle)
</script>

<style scoped>
.article-detail {
    margin: 20px 0;
}

.no-data {
    text-align: center;
    font-size: 1.2em;
    color: #999;
}
</style>